<template>
  <div>
    <div class="dashboard-container">
      <div class="big-back-box">
        <div class="top">取消订单</div>
        <div style="height: 20px"></div>
        <el-card class="box-card" style="width: 500px; margin: 0 auto">
          <el-input type="textarea" placeholder="请输入取消订单原因" v-model="textarea1" rows="5"></el-input>
          <div style="margin: 20px 0"></div>
          <el-button style="float: right;" type="danger" @click="cancelPay">确定取消订单</el-button>
          <div style="height: 40px"></div>
        </el-card>
      </div>
    </div>
  </div>
</template>

<script>
import { requestCancellationOfOrder } from "@/api/order";
export default {
  data() {
    return {
      textarea1: "",
      textarea2: "",
      // road: "/customerCenter/customerOrder/orderList",
      value: null // 评价相关
    };
  },

  methods: {
    cancelPay() {
      this.$confirm("确定取消订单?", "提示", {
        confirmButtonText: "确定",
        cancelButtonText: "取消",
        type: "warning",
        center: true
      })
        .then(() => {
          requestCancellationOfOrder(this.$route.query.id).then(res => {
            console.log(res.data);
            if (res.data.result) {
              this.$message({
                type: "success",
                message: "取消订单成功!"
              });
              this.$router.push({
                path: "/customerCenter/customerOrder/orderList"
              });
            }
          });
        })
        .catch(() => {
          this.$message({
            type: "info",
            message: "已取消购买"
          });
        });
    }
  }
};
</script>

<style lang="scss" scoped>
// 页头LOGO
.top {
  height: 50px;
  font-size: 30px;
  text-align: center;
  line-height: 50px;
}

// 大盒子
.big-back-box {
  width: 1080px;
  margin: 0 auto;
}

// 原框架自带
.dashboard {
  &-container {
    margin-top: 30px;
    // margin-left: 30px;
    // margin-right: 30px;
  }
  &-text {
    font-size: 30px;
    line-height: 46px;
  }
}
</style>